<template>
  <el-dialog :model-value="visible" title="分值批量设置" width="1100px" center align-center destroy-on-close @close="onClose">
    <div class="tips">
      <div>1.多选题：若用户选错答案，则得分为0</div>
      <div>2.填空题：若评阅方式为系统阅卷，用户只要填写内容就默认判为答对。</div>
    </div>
    <el-table :data="formModel.questionTypeList">
      <el-table-column :width="100" label="题目类型" prop="desc">
        <template #default="scope">
          <div>{{ scope.row.desc }}</div>
        </template>
      </el-table-column>
      <el-table-column :width="100" label="题目数量">
        <template #default="scope">
          {{ scope.row.questionSum }}
        </template>
      </el-table-column>
      <el-table-column label="分值设置" prop="score">
        <template #default="scope">
          <span> 每题 <el-input-number v-model="scope.row.questionScore" class="min-number" controls-position="right" :precision="2" :min="0" /> 分 </span>
          <span v-if="scope.row.code === 2" style="margin-left: 10px">
            <!-- 多选题 -->
            <el-radio-group v-model="scope.row.multiScoreWay">
              <el-radio :value="1">漏选得&nbsp;<el-input-number v-model="scope.row.multiScore" class="min-number" controls-position="right" :precision="2" :min="0" /> 分</el-radio>
              <el-radio :value="2">每个正确得&nbsp;<el-input-number v-model="scope.row.multiScore" class="min-number" controls-position="right" :precision="2" :min="0" /> 分</el-radio>
            </el-radio-group>
          </span>
          <span v-if="scope.row.code === 4" style="margin-left: 10px">
            <!-- 填空题 -->
            <el-radio-group v-model="scope.row.fillScoreWay">
              <el-radio :value="2">每空&nbsp;<el-input-number v-model="scope.row.fillScore" class="min-number" controls-position="right" :precision="2" :min="0" /> 分</el-radio>
            </el-radio-group>
            <span class="tip">当填空题有多个空时，对一个得分</span>
          </span>
        </template>
      </el-table-column>
      <el-table-column :width="100" label="总分">
        <template #default="scope">
          {{ scope.row.questionSum * scope.row.questionScore }}
        </template>
      </el-table-column>
    </el-table>
    <div class="total-score">合计总分：{{ handleTotalScore(formModel.questionTypeList) }}</div>
    <template #footer>
      <el-button @click="onClose()">取消</el-button>
      <el-button type="primary" @click="onSubmit()">确定</el-button>
    </template>
  </el-dialog>
</template>
<script setup>
  import { computed, reactive, ref } from 'vue'
  const emit = defineEmits(['refresh'])
  const formModel = reactive({})

  // 计算总分
  const handleTotalScore = computed(() => {
    return function (arr) {
      let total = 0
      arr.forEach((i) => {
        if (i.questionScore) {
          total += i.questionScore * i.questionSum
        }
      })
      formModel.totalScore = total
      return total
    }
  })

  // 提交
  const onSubmit = async () => {
    emit('refresh', formModel)
    onClose()
  }

  // 打开和关闭
  const visible = ref(false) // 弹窗显示状态
  const onOpen = (item) => {
    if (item) {
      Object.assign(formModel, item)
    }
    visible.value = true
  }
  defineExpose({ onOpen })
  const onClose = () => {
    visible.value = false
    Object.assign(formModel, {})
  }
</script>
<style lang="scss" scoped>
  .total-score {
    float: right;
    width: 150px;
  }
</style>
